<template>
  <div>
    <h1>App</h1>
    <!-- http://localhost:8080/index.html#sdsds -->

    <ul>
      <li>
        <!-- <a href="http://localhost:8080#/a/b">Home</a> -->
        <router-link to="/a/b"> Home</router-link>
      </li>
      <li>
        <!-- <a href="http://localhost:8080#/c/d">Shop</a> -->
        <router-link to="/c/d"> Shop</router-link>
      </li>
      <li>
        <a href="#/e/f">Order</a>
      </li>
    </ul>
    <button @click="log">router</button>
    <!-- <component :is="cname"></component> -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    log() {
      // 注入就是给每一个vue对象设置属性或者方法，Vue.prototype
      console.log(this.$router); // router
      console.log(this.$route); // location 精简版
      console.log(this.info === this.$router);
    }
  }
}
</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>